import { ClockCircleOutlined, EyeOutlined } from '@ant-design/icons';
import { useState, useEffect } from 'react';
import Head from '@/components/Head';
import Tkd from '@/ssr/tkd';
// css
import styles from '@/styles/CommonDetail.module.scss';
// 组件
import _404 from '@/pages/404';
import Breadcrumb from '@/components/Breadcrumb';
import HotProductPart from '@/pages_components/components/HotProductPart';
import Detail from '@/pages_components/detail/Detail';
import RelateProductPart from '@/pages_components/guide/RelateProductPart';
import RelateGuidePart from '@/pages_components/guide/GuidePart';
import NewGuidePart from '@/pages_components/guide/GuidePart';

const pageType = '/guide';
const GuideDetail = ({ router, ssr, ssr_data, newList }) => {

    const { path } = router.query;
    const { goodsIds, publishTime, title, subtitle, viewNumber, recommendContent = [] } = ssr_data;
    const [time, setTime] = useState('');
  
    useEffect(() => {
        const arr = publishTime ? publishTime.split('/') : "",
            _arr = arr ? [arr[0], '年', arr[1], '月', arr[2], '日'] : [];
        setTime(_arr.join(''))
    }, []);
    // 未找到产品
    if(!ssr.length){
        return <_404 />
    }

    return (
        <div className={styles['common-detail-page']}>
            {/* 标题/关键字/网页描述 */}
            <Head meta={Tkd[`${pageType}/`](title, subtitle)} />
            {/* 正文 */}
            <div className="max-content">
                <div className={styles['common-wrap']}>
                    {/* 面包屑 */}
                    <Breadcrumb
                        params={
                            [
                                { name: '旅游攻略', url: pageType },
                                { name: title, url: `${pageType}/${path}` }
                            ]
                        }
                    />
                    {/* 相关产品推荐 */}
                    <RelateProductPart goodsIds={goodsIds} />
                    {/* 正文 */}
                    <section className={styles['left']}>
                        <h1 className={styles["detail-title"]}>{title}</h1>
                        <p className={styles['detail-short']}>
                            {
                                time ? <span><ClockCircleOutlined /> {time}</span> : ''
                            }
                            {
                                viewNumber ? <span><EyeOutlined /> {viewNumber}</span> : ''
                            }
                        </p>
                        <p className={styles['detail-sub-title']}>
                            <span>【摘要】</span>{subtitle}
                        </p>
                        {/* 详情 */}
                        <Detail data={ssr} target={pageType} />
                        {/* 相关攻略 */}
                        <RelateGuidePart title="相关攻略" list={recommendContent} />
                        {/* 最新攻略 */}
                        <NewGuidePart title="最新攻略" list={newList} />
                    </section>
                    <aside className={styles['right']}>
                        <HotProductPart product="热门景区" target="/ticket" />
                        <HotProductPart product="热门线路" target="/line" />
                    </aside>
                </div>
            </div>
        </div>
    )
}
export default GuideDetail